<template>
	<!-- <uni-forms>
		<text style="padding: 20px 20px 20px 30px;">{{ formItem.t_name }}</text>
		<text>手动</text><switch :checked="_switch" @change="change"></switch><text>自动</text>
	</uni-forms> -->
	<uni-forms style="padding: 0px 0px 20px 20px;">
		<Switch_
		v-for=" item in Switchfields"
		:key="item.id"
		:form-item="item"
		:index="item.id"
		:ws="props.ws"
		></Switch_>
		
		<Input_ 
		v-for=" item in Inputfields"
		 :key="item.id"
		 :form-item="item"
		 :index="item.id"
		 :ws="props.ws"
		></Input_>
			
		<Slider_
		v-for=" item in Sliderfields"
		:key="item.id"
		:form-item="item"
		:index="item.id"
		:ws="props.ws"
		></Slider_>
		
		<Data_
		v-for=" item in Timefields"
		:key="item.id"
		:form-item="item"
		:index="item.id"
		:ws="props.ws"
		></Data_>
			
		<Checkbox_
		v-for=" item in Checkboxfields"
		:key="item.id"
		:form-item="item"
		:index="item.id"
		:ws="props.ws"
		:device="props.device"
		></Checkbox_>
			
		<!-- <component v-for="(item, i) in ChilderList"
					:key="item.id"
					:is="SelectType(item)"
					:form-item="item" /> -->
					 
	</uni-forms> 
</template>
<script lang="ts" setup>
import Input_ from '../funComponent/Input_.vue';
import Switch_ from '../funComponent/Switch_.vue';
	import Slider_ from '../funComponent/Slider_.vue';
	import Data_ from '../funComponent/Data_.vue';
import Checkbox_ from '../funComponent/Checkbox_.vue';
	import { ref, defineProps, onMounted, computed } from 'vue'
	import { on } from 'events';
	const props = defineProps({
		formItem: {
			type: Object,
			required: true
		},
		childer: {
			type: Object,
			required: true
		},
		index: {
			type: Number,
			required: true
		},
		ws:
		{
			type:WebSocket,
			required:true
		},
		device:{
			type:Number,
			required:true
		}
	})
	let _switch=ref(false)
	let _value=ref("b")
	let switchvalue = ref(props.formItem.set_value || '');
	if(props.formItem.set_value=="a")
	{
		_value.value="a"
		_switch.value=true
	}

	const change=()=>
	{
		if(_value.value=="a")
		{
			_value.value="b"
		}
		else
		{
			_value.value="a"
		}
		props.ws.send({data:
		  JSON.stringify({
		    page: 5,
		    type: -1,
		    value: _value.value,
		    config_id: props.formItem.id,
		    d_no: 1
		  })}
		);

	}
	
	const Switchfields = computed(() => {
		return props.childer.filter(item => item.ref_id == props.formItem.id &&item.ref_value==_value.value&&item.f_type === "1")
	})
	
	const Inputfields = computed(() => {
		return props.childer.filter(item => item.ref_id == props.formItem.id &&item.ref_value==_value.value&&item.f_type === "2"&&item.ref_value == "c")
	})
	
	const Sliderfields = computed(() => {
		return props.childer.filter(item => item.ref_id == props.formItem.id &&item.ref_value==_value.value&&item.f_type === "3")
	})
	
	const Timefields = computed(() => {
		return props.childer.filter(item => item.ref_id == props.formItem.id &&item.ref_value==_value.value&&item.f_type === "4")
	})
	
	const Checkboxfields = computed(() => {
		return props.childer.filter(item => item.ref_id == props.formItem.id &&item.ref_value==_value.value&&item.f_type === "5")
	})
	
	
	
	// const SelectType = (i) => {
	// 	if (i.f_type === '1') {
	// 		return Switch_;
	// 	}
	// 	else if (i.f_type === '2') {
	// 		return Input_;
	// 	}
	// 	else if (i.f_type === '3') {
	// 		return Slider_;
	// 	}
	// 	else if (i.f_type === '4') {
	// 		return Data_;
	// 	}
	// 	else if (i.f_type === '5') {
	// 		return Checkbox_;
	// 	}
	// 	console.log(i.f_type);
	// };


	const show = ref(false)

	// const ChilderList = computed(() => {
	// 	return props.childer.filter(item => item.ref_id == props.formItem.id &&item.ref_value==_value.value)
	// })
</script>